<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/icons/iconfont.css" />
    <link rel="stylesheet" href="../css/head.css" />
    <link rel="stylesheet" href="../css/footer.css" />
    <link rel="stylesheet" href="../css/myOrderInfo.css" />
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="logo">
            <a href="../index.html"><img src="../images/logo.png" alt="我要去印"></a>
        </div>
        <div class="iconmenu">
            <input type="text" value="" placeholder="搜索">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="message">
            <i class="iconfont icon-xiaoxi"></i>
            <p>12</p>
        </div>
        <div class="user-info">
            <img src="../images/menuUserinfoHeadkey.jpg" alt="">
            <div class="triangle-bottom"></div>
            <div class="all-info">
                <p><i class="iconfont icon-zhuye"></i>我的主页</p>
                <p><i class="iconfont icon-dingdan"></i>我的订单</p>
                <p><i class="iconfont icon-tuichu"></i>退出</p>
            </div>
        </div>
    </header>
    <div class="main">
        <div class="speedProgress">
            <a href="javascript:0">我的主页 > </a>
            <a id="myOrderLink" href="http://www.baidu.com">我的订单</a>
            <a href="javascript:0"> > 订单号：768743456987</a>
        </div>
        <!--第一块-->
        <div class="content1 clearfix">
            <div class="content1-left fl">
                <div class="left-orderNumber">订单号：768743456987</div>
                <div class="left-orderStatus">等待收货</div>
                <button class="left-orderBtn">确认收货</button>
            </div>
            <div class="content1-right fl">
                <div class="right-tips">
                    <div>尊敬的客户，您的订单商品已经从库房发出，请您做好收货准备</div>
                    <div>如果您已收到货物，请点击“确认收货”按钮完成订单</div>
                </div>
                <div class="right-statusInfo clearfix">
                    <div class="status fl">
                        <div class="iconOuter-else">
                            <li class="iconfont icon-dingdan1 icon-pre"></li>
                        </div>
                        <div class="status-icon-font status-icon-font-pre">提交订单</div>
                        <div class="status-date">
                            <div>2017-09-20</div>
                            <div>23:08:09</div>
                        </div>
                    </div>
                    <div class="right-arrow fl">
                        <img src="../images/right-arrow.jpg" />
                    </div>
                    <div class="status fl">
                        <div class="iconOuter-else">
                            <li class="iconfont icon-yinxingqia icon-pre"></li>
                        </div>
                        <div class="status-icon-font status-icon-font-pre">付款成功</div>
                    </div>
                    <div class="right-arrow fl">
                        <img src="../images/right-arrow.jpg" />
                    </div>
                    <div class="status fl">
                        <div class="iconOuter-else">
                            <li class="iconfont icon-zhizuo icon-pre"></li>
                        </div>
                        <div class="status-icon-font status-icon-font-pre">制作完成</div>
                    </div>
                    <div class="right-arrow fl">
                        <img src="../images/right-arrow.jpg" />
                    </div>
                    <div class="status fl">
                        <div class="iconOuter-else">
                            <li class="iconfont icon-ccgl-chukuguanli-1 icon-pre"></li>
                        </div>
                        <div class="status-icon-font status-icon-font-pre">商品出库</div>
                        <div class="status-date">
                            <div>2017-09-20</div>
                            <div>23:08:09</div>
                        </div>
                    </div>
                    <div class="right-arrow fl">
                        <img src="../images/right-arrow.jpg" />
                    </div>
                    <div class="status fl">
                        <div class="iconOuter-now">
                            <li class="iconfont icon-shouhuo icon-now"></li>
                        </div>
                        <div class="status-icon-font status-icon-font-now">等待收货</div>
                    </div>
                    <div class="right-arrow fl">
                        <img src="../images/right-arrow.jpg" />
                    </div>
                    <div class="status fl">
                        <div class="iconOuter-else">
                            <li class="iconfont icon-wanchengx icon-next"></li>
                        </div>
                        <div class="status-icon-font status-icon-font-next">完成</div>
                    </div>
                </div>
            </div>
        </div>

        <!--第二块-->
        <div class="content2 clearfix">
            <div class="content2-left fl">
                <div class="content2-title">收货人信息</div>
                <div class="content2-content">
                    <div>
                        <div class="content2-content-key">收货人：</div>
                        <div class="content2-content-value">刘宝宝</div>
                    </div>
                    <div>
                        <div class="content2-content-key">地址：</div>
                        <div class="content2-content-value">广东广州市海珠区城区新滘西路300号铂涛大厦新滘西路300号铂涛大厦</div>
                    </div>
                    <div>
                        <div class="content2-content-key">手机号：</div>
                        <div class="content2-content-value">134****3256</div>
                    </div>
                </div>
            </div>
            <div class="content2-middle fl">
                <div class="content2-title">配送信息</div>
                <div class="content2-content">
                    <div>
                        <div class="content2-content-key">配送方式：</div>
                        <div class="content2-content-value">申通快递</div>
                    </div>
                    <div>
                        <div class="content2-content-key">运费：</div>
                        <div class="content2-content-value">￥12.00</div>
                    </div>
                    <div>
                        <div class="content2-content-key">快递单号：</div>
                        <div class="content2-content-value">3246547568576</div>
                    </div>
                    <div class="content-value-explain">( 请您登陆快递官网自主查询物流信息 )</div>
                </div>
            </div>
            <div class="content2-right fl">
                <div class="content2-title">付款信息</div>
                <div class="content2-content">
                    <div>
                        <div class="content2-content-key">付款方式：</div>
                        <div class="content2-content-value">在线支付</div>
                    </div>
                    <div>
                        <div class="content2-content-key">付款时间：</div>
                        <div class="content2-content-value">2017-09-21 12：07：07</div>
                    </div>
                    <div>
                        <div class="content2-content-key">商品总额：</div>
                        <div class="content2-content-value">￥169.00</div>
                    </div>
                    <div>
                        <div class="content2-content-key">支付金额：</div>
                        <div class="content2-content-value">￥169.00</div>
                    </div>
                    <div>
                        <div class="content2-content-key">支付优惠：</div>
                        <div class="content2-content-value">￥2.00</div>
                    </div>
                </div>
            </div>
        </div>

        <!--第三块-->
        <div class="content3">
            <!--订单相关的title-->
            <div class="orderTitle">
                <div class="title-orderDetails fl">商品属性</div>
                <div class="title-other fl">单价</div>
                <div class="title-other fl">数量</div>
                <div class="title-other fl">小计</div>
            </div>

            <!--订单详情-->
            <div class="orderRule">
                <div class="rule-info clearfix">
                    <div class="fl rule-info-orderDetails clearfix">
                        <div class="fl info-orderDetails-img">
                            <img src="../images/myOrderImg.jpg" />
                        </div>
                        <div class="fl info-orderDetails-title-charater">
                            <div class="info-orderDetails-title">蓝色简洁清新名片卡公司员工卡特色卡</div>
                            <div class="info-orderDetails-charater">
                                <span>无孔</span>
                                <span>覆膜压印</span>
                                <span>覆膜压印</span>
                                <span>覆膜压印</span>
                                <span>覆膜压印</span>
                                <span>覆膜压印</span>
                                <span>无孔</span>
                                <span>覆膜压印</span>
                                <span>覆膜压印</span>
                            </div>
                        </div>
                    </div>
                    <div class="fl rule-info-amountPay">￥1.2</div>
                    <div class="fl rule-info-deliveryStatus">400</div>
                    <div class="fl rule-info-orderStatus">￥480</div>
                </div>
                <div class="orderTotal clearfix">
                    <div class="orderRemarks fl">备注： 10月20日发货</div>
                    <div class="orderTotal-right fr">
                        <div>
                            <div class="orderTotal-key">模板费用：</div>
                            <div class="orderTotal-value">￥12</div>
                        </div>
                        <div>
                            <div class="orderTotal-key">快递费用：</div>
                            <div class="orderTotal-value">￥12</div>
                        </div>
                        <div>
                            <div class="orderTotal-key">合计（含运费）：</div>
                            <div class="orderTotal-value" id="orderTotal-total">￥624</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="wqb">
            <img src="../images/weixin.jpg" alt="">
            <img src="../images/weibo.jpg" alt="">
            <img src="../images/qq.jpg" alt="">
        </div>
        <div class="footer-info">
            <ul class="clearfix">
                <li><a href="javascript:void(0)">关于我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">联系我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">加入我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">商务合作</a></li>
            </ul>
            <p>版权所有&nbsp©&nbsp京ICP备14007358号-1 / 京公网安备11010802014104号</p>
        </div>
        <div class="erweima"><img src="../images/erweima.jpg" alt=""></div>
    </footer>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/head.js"></script>

</html>